<template>
  <div class="media">
    <el-tabs v-model="tabActiveName">
      <el-tab-pane label="用户素材库" name="media">
        <user-media :setting="setting.media"></user-media>
      </el-tab-pane>
      <el-tab-pane label="七牛云存储" name="qi">
        <qn-form :setting="setting.media"></qn-form>
      </el-tab-pane>
      <el-tab-pane label="阿里云OSS" name="al">
        <al-form :setting="setting.media"></al-form>
      </el-tab-pane>
      <el-tab-pane label="腾讯云存储" name="tx">
        <tx-form :setting="setting.media"></tx-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import UserMedia from './components/user-media'
import QnForm from './components/qn-form'
import AlForm from './components/al-form'
import TxForm from './components/tx-form'
export default {
  name: 'Media',
  components: {
    UserMedia,
    QnForm,
    AlForm,
    TxForm
  },
  data() {
    return {
      tabActiveName: 'media',
      setting: {}
    }
  },
  mounted() {
    this.getSetting()
  },
  methods: {
    getSetting() {
      this.$get('setting')
        .then((res) => {
          this.setting = res.data.data
        })
    }
  }
}
</script>

<style scoped>

</style>
